<template>
<div>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>作者信息</span>
      </div>
      <!-- 作者信息-->
      <div class="text item">
        <el-row :gutter="20">
          <!-- 头像-->
          <el-col :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="6">
            <el-button type="danger" disabled>{{userStatue}}</el-button>
            <el-card shadow="hover">
              <el-image
                  style="width: 80px; height: 80px"
                  :src="userInfo.avatarUrl"
                 fit="fill"
              />
            </el-card>
            <!--关注按钮-->
            <el-button v-if="!isFollow" @click="processFollow" type="primary" size="mini" style="margin-left: 20px">
              关注
            </el-button>
             <!--取关按钮-->
            <el-button v-if="isFollow" @click="processFollow" type="danger" size="mini" style="margin-left: 20px">
              取关
            </el-button>

          </el-col>
          <!-- 信息-->
          <el-col :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="6">
            <el-card shadow="hover">
              <div>
                <span>用户名</span>
                <el-tag type="primary" size="normal">
                  {{userInfo.username}}
                </el-tag>
              </div>
            </el-card>
            <el-card shadow="hover">
              <div>
                <span>个人简介</span>
                <el-tag type="success" size="normal">
                  {{userInfo.profile}}
                </el-tag>
              </div>
            </el-card>
            <el-card shadow="hover">
              <div>
                <span>粉丝数</span>
                <el-tag type="warning" size="normal">
                  {{userInfo.fans}}
                </el-tag>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!--作者的其他文章列表-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>作者文章</span>
      </div>
      <div style="overflow-y: auto;height: 800px;background-color: rgba(66,185,131,0)">
        <el-form ref="queryForm_articleInfo" inline style="text-align: left"
                 :model="queryForm_articleInfo"
                 label-position="left" label-width="80px">
          <!--<el-form-item label="用户名" prop="username">-->
          <!--  <el-input v-model="queryForm_articleInfo.username" clearable show-word-limit :maxlength="255">-->
          <!--  </el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="queryForm_articleInfo.title" clearable show-word-limit :maxlength="255">
            </el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <el-input v-model="queryForm_articleInfo.content" clearable show-word-limit :maxlength="65535">
            </el-input>
          </el-form-item>
          <!--<el-form-item label="创建时间" prop="createTime">-->
          <!--  <el-date-picker format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd"-->
          <!--                  v-model="queryForm_articleInfo.createTime">-->
          <!--  </el-date-picker>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="修改时间(update 时更新时间)" prop="updateTime">-->
          <!--  <el-date-picker format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd" v-model="queryForm_articleInfo.updateTime">-->
          <!--  </el-date-picker>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="点赞量" prop="likes">-->
          <!--  <el-input v-model="queryForm_articleInfo.likes" clearable show-word-limit :maxlength="null">-->
          <!--  </el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="收藏量" prop="collections">-->
          <!--  <el-input v-model="queryForm_articleInfo.collections" clearable show-word-limit :maxlength="null">-->
          <!--  </el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="标签" prop="tags">
            <el-input v-model="queryForm_articleInfo.tags" clearable show-word-limit :maxlength="255">
            </el-input>
          </el-form-item>
          <el-form-item label="权限" prop="permissionList">
            <el-select v-model="queryForm_articleInfo.permissionList">
              <el-option label="全部" value="00">
              </el-option>
              <el-option label="粉丝" value="01">
              </el-option>
              <el-option label="仅自己" value="02">
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="备注" prop="remark">-->
          <!--  <el-input v-model="queryForm_articleInfo.remark" clearable show-word-limit :maxlength="255">-->
          <!--  </el-input>-->
          <!--</el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="search_articleInfo">查询</el-button>
            <el-button type="info" @click="resetQueryForm_articleInfo">重置</el-button>
          </el-form-item>
        </el-form>
        <!--操作按钮-->
        <div style="text-align: left">
          <el-button style="margin:-10px 10px 10px" type="text" size="medium" @click="isList = !isList"
          >列表/表格
          </el-button>
        </div>
        <!--表格-->
        <el-table v-if="!isList" v-loading="loadingTable_articleInfo"
                  :data="currentTableData_articleInfo" style="width: 100%"
                  ref="multipleTable">
          <!--<el-table-column type="selection" width="55"/>-->
          <!--<el-table-column label="文章 id(即自增主键)" prop="articleId" align="center"/>-->
          <el-table-column label="用户名" prop="username" align="center"/>
          <el-table-column label="文章内容" prop="content" align="center">
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="hover">
                <div v-html="scope.row.content"></div>
                <el-button slot="reference" type="text">查看</el-button>
              </el-popover>
            </template>
          </el-table-column>

          <!--<el-table-column label="创建时间" prop="createTime" align="center"/>-->
          <!--<el-table-column label="修改时间" prop="updateTime" align="center"/>-->
          <el-table-column label="点赞量" prop="likes" align="center"/>
          <el-table-column label="收藏量" prop="collections" align="center"/>
          <el-table-column label="标签" prop="tags" align="center"/>
          <el-table-column label="权限" prop="permissionList" align="center"/>
          <el-table-column label="备注" prop="remark" align="center"/>
        </el-table>
        <!--列表形式展示文章   不使用表格-->
        <ArticleListCard v-if="isList" :article-info-data="currentTableData_articleInfo"/>
        <!-- 分页-->
        <div>
          <el-pagination
              @size-change="handleSizeChange_articleInfo"
              @current-change="handleCurrentChange_articleInfo"
              :current-page="currentPage_articleInfo"
              :page-sizes="[1,2,3,4,5,10, 20, 30, 50]"
              :page-size="pageSize_articleInfo"
              layout="total, sizes, prev, next"
              :total="total_articleInfo"
          />
        </div>
      </div>
    </el-card>
  </div>
</div>
</template>

<script>
import lyy from '@/assets/img/lyy.jpeg'
import {getUserName} from "@/api/token";
import {
  get_articleInfoInfo
} from "@/api/articleInfo";
import {
  add_followingDetailInfo,
  deleteFollowingByUserNameAndFolloweeName, get_followingDetailInfo,
  get_IsFollowing
} from "@/api/followingDetails";
import {getUsersInfoByUserNameNoPassword} from "@/api/userInfo";
export default {
  name: "AuthorInfoPage",
  data() {
    return {
      /**
       * 用户状态
       */
      userStatue:'',
      /**
       * 是否关注
       */
      isFollow:false,
      userInfo:{
        avatarUrl:lyy,
        /**
         * 当前作者
         */
        username:'',
        profile:'这个人还没有留下简介哦~',
        fans:99
      },

      // 列表或者表格显示模式
      isList:true,
      // 查询表单
      queryForm_articleInfo: {
        username: null,
        content: null,
        title:null,
        createTime: null,
        updateTime: null,
        likes: null,
        collections: null,
        tags: null,
        permissionList: null,
        remark: null,
        pageNum: 1,
        pageSize: 2
      },
      // 表格遮罩层
      loadingTable_articleInfo: true,
      // 表单对齐方式
      labelPosition_articleInfo: 'left',
      // 当前表格显示数据（前端分页后的数据）
      currentTableData_articleInfo: [],
      // 当前显示页数
      currentPage_articleInfo: 1,
      // 每页大小
      pageSize_articleInfo: 2,
      // 总数量
      total_articleInfo: 0,
    }
  },
  methods: {
    /**
     * 获取用户名
     */
    getUsername() {
      this.userInfo.username = this.$route.query.authorName
    },
    /**
     * 获取用户信息
     */
    getProfileByUserName(){
      getUsersInfoByUserNameNoPassword(this.userInfo.username).then((res)=>{
        console.log('用户信息',res)
        if (res.data===false){
          this.userStatue = res.message
          return
        }
        // console.log('用户信息',res)
        if(res.code===200){
          this.userInfo.profile = res.data.profile
        }
      }).catch((err)=>{

      })
    },
    /**
     *  获取粉丝
     */
    getFansByUserName(){
        // 查询被关注人 = 当前作者的总条数即可
      get_followingDetailInfo({
        followingUserName:this.userInfo.username
      }).then((res)=>{
        // console.log('我的粉丝列表',res)
        if(res.code===200){
          this.userInfo.fans = res.data.total
        }
      }).catch((err)=>{

      })
    },
    // 后端数据
    getInfoFromBack_articleInfo(queryForm) {
      get_articleInfoInfo(queryForm).then((res) => {
        this.total_articleInfo = res.data.total
        this.currentTableData_articleInfo = res.data.tableData
        this.loadingTable_articleInfo = false
      }).catch((err) => {
        console.log(err)
      })
    },
    // 前端查询
    search_articleInfo() {
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo);
    },
    //重置查询
    resetQueryForm_articleInfo() {
      // model 与 prop必填
      this.$refs["queryForm_articleInfo"].resetFields()
    },
    // 分页栏换条数
    handleSizeChange_articleInfo(val) {
      this.queryForm_articleInfo.pageSize = val
      this.queryForm_articleInfo.pageNum = 1
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 选择页数
    handleCurrentChange_articleInfo(val) {
      this.queryForm_articleInfo.pageNum = val
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 初始化本页所需数据
    initData_articleInfo() {
      this.queryForm_articleInfo.username = getUserName()
      // console.log('username****',this.queryForm_articleInfo.username)
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    /**
     * 打开富文本阅读页面
     * @param articleId
     */
    openQuillReadPage(articleId) {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId: articleId
        }
      })
    },
    /**
     * 打开富文本编辑页面
     */
    goToQuillWritePage(){
      this.$router.push({
        path: '/index/edit-text'
      })
    },
    /**
     * 获取是否关注
     */
    getIsFollow() {
      let userName = getUserName()
      let getForm = {
        // 当前登录用户
        userName:getUserName(),
        // 被关注的人
        followingUserName:this.userInfo.username
      }
      // console.log('查询参数',this.articleAllInfo)
      if(userName){
        get_IsFollowing(getForm).then((res)=>{
          this.isFollow = res.data
          // console.log('是否关注',this.isFollow)
        }).catch((err)=>{
          console.log(err)
        })
      }
    },
    /**
     * 处理关注
     */
    processFollow(){
      this.isFollow= !this.isFollow
      if(this.isFollow){
        add_followingDetailInfo({
          // 当前登录用户
          userName:getUserName(),
          // 被关注的人
          followingUserName:this.userInfo.username
        }).then((res)=>{
          // console.log(res)
        }).catch((err)=>{
          console.log(err)
        })
      }else {
        deleteFollowingByUserNameAndFolloweeName({
          // 当前登录用户
          userName:getUserName(),
          // 被关注的人
          followingUserName:this.userInfo.username
        }).then((res)=>{
        })
      }
    },
},
  mounted() {
    this.getUsername()
    this.getProfileByUserName()
    this.getFansByUserName()
    this.getIsFollow()
    this.queryForm_articleInfo.username = this.userInfo.username
    this.queryForm_articleInfo.permissionList = '00' // 只能查看全部权限的
    this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
  }
}
</script>

<style scoped>

</style>